<template>
	<view class="box">
		<!-- 注释 -->
	<view class="cord" :class="card.length>0?'bgc':''">
			<text @click="goDesc">使用说明＞</text>
		</view>
		<!-- 空 -->
		<view class="none" v-if="!card.length">
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/big/icon_225@2x.png" mode=""></image>
			</view>
			<view class="f30 tr c666">暂时没有任何礼品卡哦</view>
		</view>
		<!-- 列表 -->
		<view class="list" v-else>
			<view class="card" v-for="item in card">
				<image src="https://jw.xzsw2021.com/static/sadasdfa.png" mode=""></image>
				<view class="title">
					<text>{{item.title}}</text>
					<view class=""><text style="color:#FFDE00 ;">￥<text style="font-weight: bold;">{{item.price}}</text></text>/张</view>
				</view>
				<view class="item">
					<view class="">单张购买价：<text style="color: #FF7326;">￥<text style="font-weight: bold;">{{item.price}}</text></text> </view>
					<view class="" @click="shop(item,1)">去购买</view>
				</view>
				<view class="item">	
					<view class="">打包购买价：<text style="color: #22B591 ;">￥<text style="font-weight: bold;">{{item.group_price}}</text>/{{item.group_num}}张</text> </view>
					<view class="" @click="shop(item,2)">去购买</view>
				</view>
				<view class="item">
					<view class="" >可兑换金额：￥{{item.amount}} 有效期：{{item.day}}天</view>

				</view>
		<!-- 		<view class="one bold f28 hide-line2">{{item.title}}</view>
				<view class="three fw-bt" style="margin-top: 20rpx">
					<view class="f-w" style="justify-content: space-between;width: 100%;">
						<view class="f30 red"><text style="color: #666;">单独购买：</text> ￥<text
								class="f36 bold">{{item.price}}</text>
						</view>
						<view class="f30 red"><text style="color: #666;"
								v-if="item.group_num > 0">{{item.group_num}}张，打包购买：</text>￥<text
								class="f36 bold">{{item.group_price}}</text>
						</view>
					</view>
				</view>
				<view class="three fw-bt" style="justify-content: flex-end;margin-top: 30rpx;">

					<view class="btn" @click="shop(item,1)" style="margin-right: 30rpx;">立即购买</view>
					<view class="btn" @click="shop(item,2)">打包购买</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shopCardApi,
		cardListApi
	} from '@/api/user.js'
	export default {
		data() {
			return {
				card: [],
				search: {
					page: 1
				}
			}
		},
		onReachBottom() {
			this.search.page += 1
			this.cardList()
		},
		created() {
			this.cardList()
		},
		methods: {
			cardList() {
				cardListApi(this.search).then(res => {
					this.card.push(...res.data.data)
				}).catch(err => {

				})
			},

			// 使用说明
			goDesc() {
				console.log('使用说明');
				uni.navigateTo({
					url: '/pages/xieyi/xieyi?type=9'
				})
			},
			// 复制
			copy(value) {
				this.$copy(value)
			},
			// 直接使用
			shiyong(id) {
				let url = '/pages/index/index'
				uni.switchTab({
					url: url,
					fail: (err) => {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 兑换到余额
			shop(item, type) {
				let data = {
					card_id: item.id,
					num: 1
				}
				if (type == 2) {
					data.num = item.group_num
				}
				shopCardApi(data).then(res => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						timeStamp: res.data.config.timestamp, // 时间戳（单位：秒）
						nonceStr: res.data.config.nonceStr, // 随机字符串
						package: res.data.config.package, // 固定值
						signType: res.data.config.signType, //固定值
						paySign: res.data.config.paySign, //签名
					 success: function(res) {
							// console.log('success:' + JSON.stringify(res));
							console.log("支付成功");
							uni.showToast({
								title: "支付成功"
							})
							uni.navigateTo({
								url: '/pages/user/mygiftcard/mygiftcard'
							})
						},
						fail: function(err) {
							// console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title: "支付失败"
							})
						}
					});


				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss" >
	page{
		background: #FEF6F6;
	}
	.box {
		.tips {
			width: 750rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 24rpx;
			background: #FEF6F6;
		}

		.cord {
			padding: 18rpx 30rpx;
			font-size: 26rpx;
			text-align: right;
			color: #F45E14;
		}

		.bgc {
			background-color: #F5F5F5;
		}

		.none {
			.none-img {
				margin: 148rpx auto 160rpx;
				width: 413rpx;
				height: 243rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.orange {
			color: #F45E14;
		}

		.list {
			min-height: calc(100vh - 96rpx);
			background-color: #F5F5F5;
			// padding: 0 30rpx 30rpx;
			box-sizing: border-box;
			overflow: hidden;

			.card {
				width: 670rpx;
				height: auto;
				border: 2rpx solid #2BCCA5;
				background: linear-gradient(90deg, #E4F8F3 0%, #F9FDFC 100%);
				border-radius: 30rpx;
				margin-left: 40rpx;
               margin-top: 30rpx;
			   overflow: hidden;
			   position: relative;
			   padding-bottom: 30rpx;
			   image{
				   height: 100rpx;
				   width: 670rpx;
				   position: absolute;
				   top: 0;
				   left: 0;
				   z-index: 0;
			   }
			    .item{
					width: 610rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-left:20rpx;
					align-items: center;
						margin-left: 30rpx;
						margin-top: 30rpx;
					&>view:nth-of-type(2){
						width: 140rpx;
						height: 60rpx;
						background: linear-gradient(90deg, #2BCCA5 0%, #22B591 100%);
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					
					}
						&>view:nth-of-type(1){
							font-size: 30rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #333333;
						}
				}
				// 	<view class="item">
				// 		<view class="">单张购买价：<text>￥<text>123</text></text> </view>
				// 		<view class="">去购买</view>
				// 	</view>
				.title{
					height: 100rpx;
					width: 670rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 12rpx 0 30rpx ;
					// background: #2BCCA5;
					position: relative;
					z-index: 2;
					
					&>text{
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #FFFFFF;
					}
					view{
						font-size: 30rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
					}
				}
				// <view class="card" v-for="item in card">
				// 	<view class="title">
				// 		<text>家味礼品卡</text>
				// 		<view class=""><text>￥100</text>/张，共3张</view>
				// 	</view>
				// 	<view class="item">
				// 		<view class="">单张购买价：<text>￥<text>123</text></text> </view>
				// 		<view class="">去购买</view>
				// 	</view>
				// 	<view class="item">	
				// 		<view class="">打包购买价：<text>￥<text>123</text></text> </view>
				// 		<view class="">去购买</view>
				// 	</view>
				
			}
		}
	}
</style>
